<template>
	<div class="wrap_common Record">
		<!-- 最近更新块 -->
		<div class="update_com_wrap" :class="{'poster_wrap': item.type == 3}" v-for="(item,index) in list.data" :key="index">
			<!-- div class="update_wrap_left">
				<img :src="userInfo.user_picture" alt/>
			</！div>-->
			<div class="update_wrap_right">
				<!-- div class="update_com_title">
					<div class="update_com_title_text">获客{{ item.type | getTypeName }}</div>
					<div>{{ item.create_time }}</div>
				</!-->
				<div v-if="item.type == 3" class="update_con_title ellipsis_two_line_com">{{ item.content.title }}</div>
				<div class="update_con_img" :class="{'box_shadow_body': item.type == 3}">
					<img :src="item.content.file_url" class="aiticle_img" alt="图片" :mode="item.type == 3 ? 'widthFix' : 'aspectFill'" />
					<!-- div class="signs" v-if="item.type == 1 || item.type == 2">{{ item.content.cate_name }}</!-->
				</div>
				<div v-if="item.type == 1 || item.type == 2" class="update_com_content box_shadow_body">
					<div class="update_con_title ellipsis_two_line_com">
						<span v-if="item.type == 1 || item.type == 2" class="shop_title_tag"
							  :class="[ item.content.is_public  == 1? 'merchant_tag' : 'self_tag']">{{ item.content.is_public == 1? '平台' : '' }}</span>
						<span>{{ item.content.title || '暂无' }}</span>
					</div>
					<div class="update_con_house" v-if="item.type == 2">{{ item.content.acreage }}m² | {{
						item.content.room }}房 | {{ item.content.cate_name }} </div>
					<!-- div | {{ item.content.price }}万</div>-->
				</div>
				<div class="update_pepple">
					<div class="statistics">
						<p>
							获客人数&#12288;
							<span>{{ item.count_user }}</span>
						</p>
					</div>
					<div class="statistics">
						<p>
							浏览次数&#12288;
							<span>{{ item.browse_number }}</span>
						</p>
					</div>
					<div class="statistics">
						<p>
							分享次数&#12288;
							<span>{{ item.count }}</span>
						</p>
					</div>
				</div>
				<!--div class="btngroup">
					<div class="look_detail">查看详情</div>
				</!--div>-->
			</div>
		</div>
		<view v-if="list.finished" class="noMore">没有更多了</view>
	</div>
</template>
<script>
import { mapGetters, mapState } from 'vuex'
import { list } from '@/mixins'
import { getExpandList } from '@/api/getGuest'
import { getFormatDate } from '@/utils/common'

export default {
	name: 'ExtensionRcord',
	mixins: [list],
	data() {
		return {}
	},
	computed: {
		...mapGetters({ userInfo: 'getUser' })
	},
	onLoad(option) {
		this.getList()
	},
	// 下拉刷新
	onPullDownRefresh() {
		this.resize()
	},
	// 加载更多
	onReachBottom() {
		if (this.list.loading) {
			return
		}
		if (this.list.data.length < this.list.total) {
			this.getList()
		}
	},
	methods: {
		resize() {
			this.resetList()
			this.getList()
		},
		getList() {
			let params = {
				page: this.list.page,
				limit: this.list.limit
			}
			return getExpandList(params).then(res => {
				if (res.status == 'success') {
					uni.stopPullDownRefresh()
					let data = res.data.list.map(i => ({
						...i,
						create_time: getFormatDate(i.create_time, 'yyyy-MM-dd hh:mm:ss')
					}))
					res.data.list = data
					this.completes(res)
				}
			})
		},
		skiptodetails(id) {
			let query = {
				owner_user_id: this.userInfo.user_id,
				det_id: id
			}
			uni.navigateTo({
				url: `/pages/getGuest/extensionDetail${this.commonJS.queryData(query)}`
			})
		}
	},
	filters: {
		getTypeName(type) {
			let text = ''
			switch (type) {
				case 1:
					text = '文章'
					break
				case 2:
					text = '案例'
					break
				case 3:
					text = '海报'
					break
				default:
					text = '文章'
			}
			return text
		}
	}
}
</script>

<style lang="scss" scoped>
	.Record {
		background-color: #f5f5f5;
		min-height: 100vh;
		// .carousel_wrap {
		//     margin: 0 30px 38px;
		//     background-color: #fff;
		//     border-radius: 20px;
		//     padding: 34px 30px;
		//     box-shadow: 2px 2px 10px #ededed;
		//     .member_data_wrap {
		//         .member_title_wrap {
		//             display: flex;
		//             align-items: center;
		//             justify-content: space-between;
		//             flex: 1;
		//             color: $fontColor3;
		//             margin-bottom: 44px;
		//             .member_title {
		//                 color: #333;
		//                 font-size: 30px;
		//             }
		//             i {
		//                 color: $fontColor3;
		//                 font-size: 24px;
		//             }
		//         }
		//         .member_content_wrap {
		//             display: flex;
		//             align-items: center;
		//             justify-content: space-between;
		//             color: $fontColor3;
		//             .member_con_left {
		//                 border-right: 1px solid $borderColorMain; /*no*/
		//             }
		//             .member_con_right {
		//                 padding-left: 30px;
		//             }
		//             & > div {
		//                 width: 49%;
		//                 .member_con_list {
		//                     .flex_list {
		//                         margin-top: 20px;
		//                         display: flex;
		//                         align-items: flex-end;
		//                         span {
		//                             margin-right: 10px;
		//                             margin-bottom: 4px;
		//                         }
		//                         img {
		//                             width: 16px;
		//                             height: 18px;
		//                             margin-bottom: 10px;
		//                         }
		//                         .strong_text {
		//                             font-size: 42px;
		//                             font-weight: 600;
		//                             color: #333;
		//                             margin-bottom: 0;
		//                         }
		//                     }
		//                 }
		//                 .member_con_list:first-child {
		//                     margin-bottom: 40px;
		//                 }
		//             }
		//         }
		//     }
		// }
		// 按钮快
		// .menu_btn_wrap {
		//     display: flex;
		//     align-items: center;
		//     flex-wrap: wrap;
		//     .menu_list {
		//         width: 25%;
		//         text-align: center;
		//         margin-bottom: 40px;
		//         .menu_list_img {
		//             width: 100px;
		//             margin: 0 auto 20px;
		//         }
		//     }
		// }
		// 海报块
		.poster_wrap {
			.update_con_title {
				// color: $fontColor2 !important;
				// font-size: 28px !important;
				// font-weight: 500 !important;
				margin-bottom: 20px;
			}

			.update_con_img {
				width: 286px !important;
				min-height: 420px;
				height: auto !important;
			}
		}

		// 最近更新块
		.update_com_wrap {
			background-color: #fff;
			padding: 20px;
			margin-bottom: 20px;
			display: flex;
			align-items: flex-start;
			border-top: 0.5px solid rgba(238,238,238,1);

			//.update_wrap_left {
			//	width: 66px;
			//	padding: 20px;
			//	flex-shrink: 0;

			//	img {
			//		border-radius: 50%;
			//	}
			}

			.update_wrap_right {
				width: 100%;
				box-shadow: 0 8px 10px #f1f1f1;
				border-radius: 20px;
				.update_com_title {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin: 10px 0 24px;
					color: $fontColor3;

					.update_com_title_text {
						color: #333;
						font-weight: 600;
						font-size: 32px;
					}
				}

				.update_con_img {
					border-radius: 20px;
					.aiticle_img {
						width: 100%;
						height: 320px;
						margin-top: 10px;
						border-top-left-radius: 20px;
						border-top-right-radius: 20px;
					}
					.signs {
						padding: 20px 20px 1px 20px ;
						width: 70px;
						height: 36px;
						left: 0;
						bottom: 0;
						opacity: 0.6;
						color: white;
						text-align: center;
						line-height: 36px;
						background: black;
						position: absolute;
						border-radius: 0px 18px 0px 0px;
					}
				}

				.update_com_content {
					padding: 20px 20px 1px 20px;
					border-radius: 20px;
					color: $fontColor3;
					& > div {
						margin-bottom: 20px;
					}
					.update_con_title {
						color: #333;
						font-size: 30px;
						font-weight: 600;
						.shop_title_tag {
							font-size: 24px;
							font-weight: 400;
						}
						.shop_title_tag.self_tag {
							color: #ff6900;
							background-color: #fff5ef;
						}
						.shop_title_tag.merchant_tag {
							color: #2965fe;
							background-color: #f3f3fe;
						}
					}
				}
				.update_pepple {
					display: flex;
					align-items: center;
					padding:10px 20px 10px;
					justify-content:space-between;
					margin-bottom: 20px;
					.statistics {
						width: 28%;
						// float: left;
						font-size: 24px;
						color: #999999;
						span {
							color: #333333;
						}
					}
				}
			//	.btngroup {
					//margin-top: 30px;
				//	float: right;
				//	.look_detail {
				//		float: right;
				//		width: 160px;
				//		height: 60px;
				//		font-size: 28px;
				//		text-align: center;
				//		line-height: 60px;
				//		border: 2px solid #eeeeee;
				//		border-radius: 30px;
				//	}
			//	}
			}
		}
		img {
			width: 100%;
			height: 100%;
		}
</style>
